<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网上书店</title>

		<link rel="stylesheet" href="css/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="css/style.css">
		<script src="js/app.js" charset="UTF-8"></script>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/vue-cookies.js"></script>
		<script src="css/layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<div id="app">
			<ul class="layui-nav">
				<li class="layui-nav-item">
					<a href="index.html">主页</a>
				</li>
			
			<li  v-show="!loginflag" class="layui-nav-item" style="margin-left: 400px;">
				<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
			</li>
				<li  v-show="loginflag" class="layui-nav-item" style="margin-left: 400px;">
					<a href="javascript:void(0);" @click="loginplease">{{userShowName}}</a>
					<dl class="layui-nav-child">
						<dd> <a href="user.html">个人中心</a></dd>
						<dd><a href="javascript:void(0);" onclick="clearAllCookie()">注销</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="order.html">我的订单</a>
					<dl class="layui-nav-child">
					<dd><a href="HistoryOrder.html">历史订单</a></dd>
					</dl>
				</li>
				<li v-show="loginflag" class="layui-nav-item">
					<a href="shoppingcart.html">购物车<span class="layui-badge">{{shoppingcartnumber}}</span></a>
				</li>
				<li v-show="$cookies.get('userType')==1" class="layui-nav-item">
				<a href="myShop.html">创建商品</a>
				<dl class="layui-nav-child">
					<dd><a href="myShopOrder.html">商家订单</a></dd>
				</dl>
				</li>
			</ul>


			<div class="item">

				<div class="item-image">
					<img :src="item.itemImage" style="width: 100%;height: 100%;" />
				</div>
				<div class="item-rightbox">
					<div class="item-itemName">
						{{item.itemName}}

					</div>
					<div class="item-itemprice">
						价格:<strong style="font-size:30px;color:#FF4400">¥{{item.itemPrice|keepTwoNum}}</strong>
					</div>
					<div class="item-itemprice">

						<div class="item-itemNumber" v-if="item.itemNumber>0">
							数量:
							<button type="button" @click="subBuyNumber" class="layui-btn">-</button>
							<input v-model="buyNumber" class="layui-input" style="height:37px;padding:0;width:40px;padding-bottom:3px;text-align:center;display:inline;">
							<button type="button" @click="addBuyNumber" class="layui-btn">+</button>
						</div>
						<span>库存:{{item.itemNumber}}</span>
						<div class="item-button" v-if="item.itemNumber>0">
							<button class="layui-btn layui-btn-warm" style=" margin-left:20px;font-size:15px;width:130px;heigth:45px;background-color:#ffe4d0;color:#e5511d;float: left;border: 1px solid #F0CAB6;" @click="createOrder">立即购买</button>
							<button class="layui-btn layui-btn-danger" style="float: left;width:130px" @click="addShoppingCart">加入购物车</button>
						</div>
						<div v-else style="margin-top: 80px;"><strong>商品已售完</strong></div>
					</div>

				</div>
				<div class="item-shop">
					<div class="item-shopName">
						{{item.shopName}}
					</div>
					<div class="item-userShowName">
						店主:{{item.userShowName}}
					</div>



				</div>
				<div class="item-content">
					<span style="padding-left: 20px;font-size:20px;">商品描述：
						<span style="font-size:15px;">{{item.itemContent}}</span>
					</span>
				</div>
			</div>


		</div>





		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					userShowName: '请登录',
					username: '',
					loginflag: false,
					shoppingcartnumber: 0,
					buyNumber: 1,
					item: {
						itemImage: '' //初始化一下省的报错看着烦
					},
					itemId: ''

				},
				filters: {
					keepTwoNum: function(value) {
						value = Number(value)
						return value.toFixed(2)
					}
				},
				methods: {
					addBuyNumber: function() {
						this.buyNumber++;
					},
					subBuyNumber: function() {
						if (this.buyNumber > 1)
							this.buyNumber--;
						else
							layui.use('layer', function(){
								layer.msg("数量不能再减了")
							});
					},
					addShoppingCart: function() {
						let param = new URLSearchParams()
						param.append('itemId', vm.itemId)
						param.append('userId', $cookies.get("userId"))
						param.append('passWord', $cookies.get("passWord"))
						param.append('userName', $cookies.get("userName"))
						console.log(param.toString())
						if (!vm.loginflag) //从未登陆过
						{
							layui.use('layer', function(){
								layer.msg("请先登录再使用购物车功能")
							});
						} else { //重新验证登陆信息	
							axios.post(URL + '/item/addShoppingCart', param)
								.then(function(response) {

									if (response.data.code == 1) {
											layui.use('layer', function(){
												layer.msg("添加购物车成功")
											});
										vm.shoppingcartnumber = response.data.count
										

									} else if (response.data.code == 0) {
										console.log(response)
										console.log(response.data.msg)

									}
								})
								.catch(function(error) {
									console.log(error);
								});


						}

					},
					createOrder: function() {
						if(this.loginflag)
						{
						layui.use('layer', function(){
						  var layer = layui.layer;
						  layer.open({
						    type: 1
						    ,title:"订单明细"//不显示标题栏
						    ,closeBtn: false
						    ,area: ['600px', '400px']
						    ,shade: 0.8
						    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
						    ,btn: ['确认购买', '取消']
						    ,btnAlign: 'c'
						    ,moveType: 1 //拖拽模式，0或者1
						    ,content: '<div style="padding: 76px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">用户名:'+$cookies.get("userName")+'<br><br>商品名:'+vm.item.itemName+'<br><br>数量:'+vm.buyNumber+'<br><br>总价:'+vm.item.itemPrice*vm.buyNumber+'</div>'
						    ,yes: function(index, layero){
						       let param = new URLSearchParams()
						       param.append('userId', $cookies.get("userId"))
						       param.append('passWord', $cookies.get("passWord"))
						       param.append('userName', $cookies.get("userName"))
						       param.append('Number', vm.buyNumber)
							   param.append('itemId', vm.item.itemId)
						       console.log(param.toString())
						       axios.post(URL + '/Order/createOrder',param
		         	)
						       	.then(function(response) {
						       		if (response.data.code == 1) {
										vm.itemSearch(vm.itemId)
						       			layui.use('layer', function(){
						       				layer.msg("下单成功")
						       			});
						       		} else if (response.data.code == 0) {
										layui.use('layer', function(){
										  var layer = layui.layer;
										 layer.msg('购买失败，请刷新检查库存数或者重新登陆')
										}); 
						       			console.log(response)
						       			console.log(response.data.msg)
						       
						       		}
						       	})
						       	.catch(function(error) {
						       		console.log(error);
						       	});
							   layer.close(index);
						      },
							  btn2: function(index, layero){
						  }
						  });
						});     
					
							
						}
							else {
								layui.use('layer', function(){
								  var layer = layui.layer;
								 layer.confirm('请先登录，再购买商品', {title:'提示'}, function(index){
								 window.location.href="login.html"
								   layer.close(index);
								 });
								});     
								}
					},
					loginplease: function() {
						if (this.loginflag)
							window.location.href = 'user.html'; //跳转主页
						else
							window.location.href = 'login.html'; //跳转主页
					},
					itemSearch: function(itemId) {
						console.log(URL + '/item/itemList')
						console.log(itemId)
						if (!itemId)
							window.location.href = 'index.html';
						else
							axios.get(URL + '/item/itemList', { //params参数必写 , 如果没有参数传{}也可以
								params: {
									itemId: itemId,

								}
							})
							.then(function(response) {
								if (response.data.code == 1) {
									console.log(response)
									vm.item = response.data.result


								} else if (response.data.code == 0) {
									console.log(response)
									console.log(response.data.msg)

								}
							})
							.catch(function(error) {
								console.log(error);
							});

					},

				},

				created: function() {
					checklogin().then(x => {
						if (x) {
							if ($cookies.get("userName") != null)
								this.username = $cookies.get("userName")
							if ($cookies.get("userShowName") != null)
								this.userShowName = $cookies.get("userShowName")
							this.loginflag = $cookies.get("loginflag")
							console.log(getQueryVariable("itemId"))
						}
					})

				},
				mounted: function() {

					this.itemId = getQueryVariable("itemId")
					this.itemSearch(this.itemId)

				}


			})
		</script>


		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			});
		</script>

	</body>
</html>
